<template>
  <div>
    <div v-for="(item,index) in list" :key="index" class="dadiv">
      <div v-if="item.state=='待付款'">
        <div class="divbt">
          <font class="font1">{{item.time}}</font>
          <font class="font2">{{item.state}}</font>
        </div>
        <div class="spqddiv" v-for="(item2,index2) in list2" :key="index2">
          <div v-if="item.time==item2.time">
            <img
              class="spqdimg"
              :src="poot+'miaozishangchengFile/commodity/'+item2.name+'/'+item2.name+' '+item2.colour+'.jpg'"
            />
            <div class="spqdfont">
              <font class="ft">{{item2.name}}</font>&nbsp;&nbsp;&nbsp;
              <font class="number">x{{item2.number}}</font>
              <br />
              <font class="fm">{{item2.memory}}&nbsp;&nbsp;&nbsp;{{item2.colour}}</font>
              <font class="fj">￥{{item2.price}}</font>
              <van-divider
                contentPosition="center"
                customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
              ></van-divider>
            </div>
          </div>
        </div>

        <div class="divjiage">
          <font class="font3">
            共计{{shangpingjianshu.split(",")[index]}}件商品 &nbsp;&nbsp;&nbsp; 实付金额
            <font
              class="font1"
            >￥{{item.actualamountpaid}}</font>
          </font>
        </div>
        <div class="anlv">
          <van-button
            plain
            hairline
            type="primary"
            size="mini"
            color="rgba(56, 47, 47, 0.432)"
            @click="shangchudd(index)"
          >删除订单</van-button>
          <van-button
            plain
            hairline
            type="info"
            size="mini"
            color="rgb(255, 102, 0)"
            @click="fkfs()"
          >立即付款</van-button>
          <van-popup v-model="showfk" position="bottom">
            付款方式
            <br />
            <van-tabs>
              <van-tab title="在线支付">
                <div class="divzffs" @click="divzffs('微信',item.time)">
                  <img class="imgzffs" src="@/assets/zffs/微信.png" />
                  <div class="divfont2">
                    <div class="zffsfont">微信</div>
                    <van-divider
                      contentPosition="center"
                      customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
                    ></van-divider>
                  </div>
                </div>
                <div class="divzffs" @click="divzffs('支付宝',item.time)">
                  <img class="imgzffs" src="@/assets/zffs/支付宝.png" />
                  <div class="divfont2">
                    <div class="zffsfont">支付宝</div>
                    <van-divider
                      contentPosition="center"
                      customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
                    ></van-divider>
                  </div>
                </div>
                <div class="divzffs" @click="divzffs('小米钱包',item.time)">
                  <img class="imgzffs" src="@/assets/zffs/钱包.png" />
                  <div class="divfont2">
                    <div class="zffsfont">小米钱包</div>
                    <van-divider
                      contentPosition="center"
                      customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
                    ></van-divider>
                  </div>
                </div>
                <div class="divzffs" @click="divzffs('银行卡',item.time)">
                  <img class="imgzffs" src="@/assets/zffs/银行卡.png" />
                  <div class="divfont2">
                    <div class="zffsfont">银行卡</div>
                    <van-divider
                      contentPosition="center"
                      customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
                    ></van-divider>
                  </div>
                </div>
              </van-tab>
              <van-tab title="分期支付">敬请期待。。。。。</van-tab>
            </van-tabs>
          </van-popup>
        </div>
        <van-divider
          contentPosition="center"
          customStyle="color: #1989fa;border-color: #1989fa;font-size: 18px;"
        ></van-divider>
      </div>
    </div>
  </div>
</template>
<script>
import Header4 from "@/components/Headergl/Header4";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      list: [],
      list2: [],
      shangpingjianshu: "",
      active: 0,
      showfk: false,
      time: ""
    };
  },
  components: {
    Header4: Header4
  },
  computed: {
    ...mapState(["zhuantai"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  methods: {
    ...mapMutations(["xg"]),
    divzffs(zf, t) {
      this.showfk = !this.showfk;
      this.time = t;

      this.$http
        .get(this.poot + "updateorser/" + this.user + "/" + this.time)
        .then(response => {
          this.$notify({
            message: zf + "支付成功",
            background: "Pink",
            duration: 1000
          });
          this.chushuhuadd();
          this.$router.push("/quanbudingdan/1");
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    shangchudd(num) {
      this.$http
        .get(
          this.poot +
            "deleteorder/" +
            this.list[num].time +
            "/" +
            this.list[num].user
        )
        .then(response => {
          this.chushuhuadd();
        })
        .catch(function(error) {});
    },
    fkfs() {
      this.showfk = !this.showfk;
    },
    chushuhuadd() {
      this.$http
        .get(this.poot + "selectorderByuser/" + this.user)
        .then(response => {
          console.log(response.data);
          this.list = response.data;
          this.chushuhuadd2();
        })
        .catch(function(error) {
          console.log(error);
          // this.$toast("获取数据失败");
        });
    },
    chushuhuadd2() {
      this.$http
        .get(this.poot + "selectorderitemByuser/" + this.user)
        .then(response => {
          console.log(response.data);
          this.list2 = response.data;
          this.chushuhuadd3();
        })
        .catch(function(error) {
          console.log(error);
          // this.$toast("获取数据失败");
        });
    },
    chushuhuadd3() {
      for (var i = 0; i < this.list.length; i++) {
        var int = 0;
        for (var j = 0; j < this.list2.length; j++) {
          if (this.list[i].time == this.list2[j].time) {
            int += this.list2[j].number;
          }
        }
        this.shangpingjianshu += int + ",";
      }
    }
  },
  mounted() {
    this.chushuhuadd();
  }
};
</script>
<style scoped>
.van-popup {
  height: 50%;
}
.zffsfont {
  margin-top: 10px;
  font-size: 15px;
}
.divzffs {
  text-align: left;
  margin-left: 20px;
  text-align: center;
}
.divfont2 {
  text-align: center;
  height: 50px;
}
.imgzffs {
  float: left;
  height: 30px;
  width: 30px;
}
.number {
  font-size: 5px;
  color: rgb(172, 166, 166);
}
.van-button {
  margin-right: 10px;
}
.anlv {
  text-align: right;
  margin-top: 5px;
}

.divjiage {
  margin-top: 10px;
  margin-left: 50px;
  font-size: 5px;
  color: rgba(56, 47, 47, 0.432);
}

.divbt {
  text-align: left;
}
.font1 {
  margin-left: 10px;
  font-size: 3px;
  color: rgba(56, 47, 47, 0.432);
}
.font2 {
  margin-left: 45%;
  font-size: 10px;
  color: rgb(255, 102, 0);
}
.font3 {
  color: #000;
  font-size: 3px;
}
.spqdfont {
  height: 40px;
  margin-left: 25%;
}
.spqdimg {
  height: 50px;
  width: 50px;
  float: left;
}
.spqddiv {
  margin-top: 15px;
  text-align: left;
  margin-left: 20px;
}

.ft {
  font-size: 15px;
}
.fm {
  font-size: 5px;
}
.fj {
  color: red;
}
</style>